const HtmlPlugin = require('html-webpack-plugin')

const htmlWebpackPlugin = new HtmlPlugin({
    template: './src/index.html',
    filename: 'index.html',//生成的文件
})

//默认约定：默认打包入口文件为src/index.js,默认的输出文件路径dist/main.js
module.exports = {
    mode: 'development',
    devServer: {
        open: true,
        host: '127.0.0.1',
        port: 8080
    },
    plugins: [htmlWebpackPlugin],
    module: {
        rules: [
            {test:/\.css$/, use: ['style-loader', 'css-loader']}//css-loader6以上版本已经可以处理css中的文件资源，默认开启
            // {
            //     test: /\.css$/i,
            //     use: ['style-loader', {
            //         loader: 'css-loader',
            //         options: {
            //             url: false,//关闭后css-loader不再处理图片，需要url-loader处理
            //         }
            //     }],
            // }
            //{test:/\.less$/, use: ['style-loader', 'css-loader','less-loader']},
            //{test:/\.jpg|png|gif$/, use:'url-loader?limit=10&outputPath=image'}//简写形式，注意这里后面的use不要使用中括号[]，这里是个大坑
            // {
            //     test: /\.jpg|png|gif$/i,
            //     use: {
            //         loader: 'url-loader',
            //         options: {
            //             limit: 22228,
            //             outputPath: 'image',
            //         },
            //     },
            // }
        ]
    }
}

